<template>
  <div class="openlayers-wrapper" :style="{ height: '100vh' }">
    <open-map class="all-container" @olMapAction="initLoad" />
  </div>
</template>

<script>
import openMap from './openMap'
import { DirectionWalk } from '@/views/mixins/aMapApi'
import { newLineLayer } from '@/views/mixins/olMapUtils'
import { gcj02towgs84 } from '@/views/mixins/transform'
export default {
  name: 'Openlayers',
  components: { openMap },
  data() {
    return {
      map: null
    }
  },
  computed: {},
  methods: {
    initLoad(map) {
      this.map = map
      console.log('olMapAction')
      this.renderRoute()
    },
    renderRoute() {
      const params = { origin: '119.019161,25.478085', destination: '119.007662,25.454202' }
      DirectionWalk(params).then((res) => {
        if (res.infocode == '10000') {
          const route = res.route.paths[0]
          const path = []
          for (var i = 0, l = route.steps.length; i < l; i++) {
            const step = route.steps[i]
            const line = step.polyline.split(';')
            for (var j = 0, n = line.length; j < n; j++) {
              const loc = line[j].split(',')
              const point = gcj02towgs84(Number(loc[0]), Number(loc[1]))
              path.push(point)
            }
          }
          const vectorLayer = newLineLayer(path)
          this.map.addLayer(vectorLayer)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.openlayers-wrapper {
  width: 100%;
  height: 100%;
}
</style>
